<template>
  <div class="boxShadow" v-if="list.GSMSXX" v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading">
    <el-card style="padding-left: 5%; padding-right: 5%">
      <!-- 标题 -->
      <div class="bold box">
        <span style="font-size: 27px">{{ list.GSMS.GSMC }}</span>
        <span style="font-size: 27px">({{ list.GSMS.GSBM }})</span>
      </div>
      <!-- 表格区域 -->
      <el-table
        v-for="(item, index) in tableData"
        :key="index"
        :data="item"
        :span-method="objectSpanMethod"
        border
        :show-header="index == 0 ? true : false"
        style="font-size: 20px"
        :header-cell-style="{ background: '#34adfc', color: '#fff' }"
      >
        <el-table-column
          prop="COLM1"
          :label="list.GSMSXX[0].Tab[0].dataName"
          min-width="30px"
        >
        </el-table-column>
        <el-table-column prop="COLM2" :label="list.GSMSXX[0].Tab[1].dataName">
        </el-table-column>
        <el-table-column prop="`COLM2" :label="list.GSMSXX[0].Tab[1].dataName">
          <template slot-scope="scope">
            <el-radio
              v-model="radio[index].val"
              :label="scope.row.COLM3"
              @change.native.stop="handleRadioChange(scope.row)"
              ><span style="font-size: 15px">{{ scope.row.COLM3 }}分</span></el-radio
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 得分 -->
      <div class="border">
        <span style="font-weight: 700">得分：</span>
        <span>{{ result }}</span>
      </div>
      <!-- 备注 -->
      <div class="box">
        <span class="bold">备注：</span>
        <span style="white-space: pre-line">{{ list.GSMSXX[0].BZ }}</span>
      </div>
      <!-- 参考文献 -->
      <div class="box">
        <span class="bold">参考文献：</span>
        <span style="white-space: pre-line">{{ list.GSMS.CKWX }}</span>
      </div>
    </el-card>
  </div>
</template>

<script>
// import Lcang from "./components/langc.vue";
import { getFormulaDetailsAPI } from "@/api";
export default {
  components: {
    // Lcang,
  },
  data() {
    return {
      loading: true, //加载状态
      result: "", // 计算结果
      radio: [], // 单选框绑定值
      list: [], // 公式数据
      tableData: {}, // 表格数据
    };
  },
  created() {
    this.getList(this.$route.params.gsbm);
  },
  methods: {
    // 单选计算结果
    handleRadioChange() {
      // 过滤出选中的radio
      let arr = this.radio.filter((item) => item.val !== "");
      let sum = [];
      if (arr.length <= 1) return (this.result = arr[0].val);
      // 计算选中结果
      arr.forEach((item) => {
        sum.push(Number(item.val));
      });
      this.result = sum.reduce((prev, cur) => {
        return prev + cur;
      });
    },

    // 获取公式详情
    async getList(gsbm) {
      try {
        const res = await getFormulaDetailsAPI({
        token: "2855ed6102590a02fd52ce00567ee9d4",
        gsbm: gsbm,
      });
      this.list = res.data.result[0];
      // 取出数组中相同的数据
      let arr = [];
      this.list.GSMSXX[0].TableD.forEach((item) => {
        let obj = [];
        for (let i = 0; i < arr.length; i++) {
          if (arr[i][0].COLM1 == item.COLM1) {
            arr[i].push(item);
            return;
          }
        }
        obj.push(item);
        arr.push(obj);
      });
      // 保存数据
      arr.forEach((item, index) => {
        this.tableData[index] = item;
        this.radio.push({ val: "" });
      });
      this.loading = false
      } catch(err) {
        this.loading = false
        console.log(err);
      }
    },

    // 合并table单元格
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % this.tableData[0].length === 0) {
          return {
            rowspan: this.tableData[0].length,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>

<style scoped>
::v-deep .el-table tbody tr:hover > td {
  background-color: transparent;
}


/deep/ .el-radio__inner {
  width: 18px;
  height: 18px;
}
.border {
  padding: 15px 20px;
  font-size: 20px;
  border: 1px solid #ebeef5;
  margin-top: -1px;
}
</style>
